<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>FlyProduct</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">        
        function KeyCheck()
        {
            checkImageList();
        }
    </script>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


</head>    
<body>
    <?php if ($this->error == 1): ?>
        <div class="alert alert-success">
            Insert done.
        </div>
    <?php elseif ($this->error == -110): ?>
        <div class="alert alert-error">
            Insert fail, please check your data.
        </div>
    <?php endif; ?>
    <?php echo $this->render('tool/navmenu.phtml') ?>

    <table class="table no-bordered">        


        <tr>
            <td><div class="pull-left">
                    <div class="span9">
                        <legend>Input new albums</legend>
                        <form  class="form-horizontal" action="/public/tool/insertgirl" method="post">
                            <div class="control-group">
                                <label class="control-label">Album name</label>
                                <div class="controls">
                                    <input  style="width:100%" type="text" id="title" name="title" value="" placeholder="Enter album's name">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Main Image</label>
                                <div class="controls">
                                    <input  style="width:100%" type="text" id="src" name="src" placeholder="Enter main image url">
                                </div>
                            </div>
                            <div class="control-group">
                                <legend>Image List for this album</legend>
                                <div class="alert alert-info" >
                                    Each url is separated by "Enter"
                                    <br>Example: http://image1.jpg"Enter"http://image2.jpg"Enter"http://image3.jpg"Enter"http://image4.jpg
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Images</label>
                                    <div class="controls">
                                        <textarea  onkeyup="KeyCheck()"  id="imageList" rows="10" name="imagelist" value="imagelist" style="width:100%"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="pull-right">
                                    <button type="reset" class="btn btn-inverse">Reset</button>
                                    <button type="submit" class="btn btn-primary">Insert this album</button>                                    
                                </div>
                            </div>
                        </form>  
                    </div>
                </div>
            </td>
            <td class="span9">
                <div class="pull-left">                    
                    <legend>Image inputed: <span id="imageViewsCount">0</span> </legend> 
                    <div class="container-fluid" id="imageViews">
                    </div>                        
                </div>
            </td>                                
        </tr>
    </table>




<script type="text/javascript">
    $(document).ready(function(){
        $("#imageList").keypress(function(ev){
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                checkImageList();
            }
        });
    });
        
    function checkImageList(){
        var imageList = document.getElementById('imageList').value;
        var n = imageList.split("\n");
            
        var imageViews = document.getElementById('imageViews');
        imageViews.innerHTML = '';
        var divChild = "";
        var total = 0;
        for(i = 0 ; i < n.length ; i++){        
            if(n[i] != '') {
                total++;
                divChild += "<img src="+n[i]+" style=\"width:50px;height=50px;padding:3px\" />";
            }                    
        }
        var imageViewsCount = document.getElementById('imageViewsCount');
        imageViewsCount.innerHTML = total;
        imageViews.innerHTML = divChild;
    }
</script>
</body>
</html>

